<template>
  <div class="about">
    <div class="content_wrap" v-loading.fullscreen.lock="fullscreenLoading">
      <div v-show="isAbridge" class="matter_title widle_title">
        <router-link to="/allBusinessList">
          <el-button circle type="primary" class="back_btn">
            <Back />
          </el-button>
        </router-link>
        <h4>{{ detailObj.matterName }}</h4>
      </div>
      <div v-show="isAbridge" class="simple_list">
        <br />
        <el-table :data="abridgeData" border empty-text="暂无数据" :show-header="false" :cell-style="propStyle"
          style="width: 100%">
          <el-table-column width="100" prop="tt0" label="属性A">
          </el-table-column>
          <el-table-column prop="td0" label="值A">
            <template #default="scope">
              <span v-if="(oid == '4298809254367879168' || oid == '4315907506028437504') && scope.row.tt0 == '办理地点'"><a
                  @click="previewAreaFile()">办理机构预览</a></span>&nbsp;
              <div v-else-if="scope.row.tt0 == '办理地点'">
                <!-- <p class="office_notice">{{ officeCurrentTxt }}</p>
                <span class="notice_txt">{{ design }} </span>
                <el-select v-model="serviceOffice" size="small" placeholder="选择"
                  @change="val => { setOfficeText(val, scope.row.td0) }">
                  <el-option v-for="item in officeArr" :label="item" :value="item" :key="'area' + item" />
                </el-select> -->
                <div v-if="realOfficeId == ''" class="real_office">{{ realOffice }}</div>
                <div v-if="realOfficeId !== ''" class="real_office"><a :href="downPDFUrl + servicePdfId">{{ realOffice
                    }}</a></div>
              </div>
              <span v-else>{{ scope.row.td0 }}</span>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <h3 ref="scrollDom1" class="list_big_tile">
          <span>&nbsp;&nbsp;{{ detailType[1].typeName }} &nbsp;&nbsp;</span>
        </h3>
        <div v-if="situationOriginData.length > 0" class="into_select">提示：请先选择您的办事情形，我们将为您精确展示办事所需提供的申报材料</div>
        <ul class="select_wrap" v-if="defaultArr.length > 0">
          <li class="s_layer" v-for="(it0, in0) in defaultArr" :key="'slayer' + in0">
            <el-radio-group v-model="defaultModel[in0]" custom-class="el-radio-group-yb">
              <el-radio v-for="(it1, in1) in it0" :label="in1 + 1" :key="'radio' + in1"
                @change="changeSituation(it1.id, in0)">{{ it1.titleName }}</el-radio>
            </el-radio-group>
          </li>
        </ul>
        <br />
        <div class="evey_materail_wrap" v-for="(item, index) in mobileMaterialList" :key="'materail' + index">
          <h6>{{ '材料' + (index + 1) + ":" }}</h6>
          <el-table :data="item" border empty-text="暂无数据" :show-header="false" :cell-style="propStyle"
            style="width: 100%">
            <el-table-column width="120" prop="dt" label="属性A">
            </el-table-column>
            <el-table-column prop="dd" label="值A">
              <!-- eslint-disable-next-line -->
              <template #default="scope">
                <span v-if="scope.row.dtype == 0">{{ scope.row.dd }}</span>
                <div v-if="scope.row.dtype == 1">
                  <a class="matterail_btn sample_btn" v-if="scope.row.dd != ''"
                    :href="downSampleUrl + scope.row.id">示例样表</a>
                </div>
                <div v-if="scope.row.dtype == 2">
                  <a class="matterail_btn empty_btn" v-if="scope.row.dd != ''" :href="downUrl + scope.row.id">表格下载</a>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--        <el-table-->
        <!--            :data="materialListData"-->
        <!--            border-->
        <!--            empty-text="暂无数据"-->
        <!--            :header-cell-style="headStyle"-->
        <!--            style="width: 100%">-->
        <!--          <el-table-column-->
        <!--              type="index"-->
        <!--              label="序号"-->
        <!--              width="40">-->
        <!--          </el-table-column>-->
        <!--          <el-table-column-->
        <!--              width="240"-->
        <!--              prop="materialName"-->
        <!--              label="材料名称">-->
        <!--          </el-table-column>-->
        <!--          <el-table-column-->
        <!--              prop="isMust"-->
        <!--              label="材料必要性">-->
        <!--          </el-table-column>-->
        <!--          <el-table-column-->
        <!--              width="70"-->
        <!--              prop="materialCategory"-->
        <!--              label="材料类型">-->
        <!--          </el-table-column>-->
        <!--          <el-table-column-->
        <!--              prop="electronicSpecification"-->
        <!--              label="材料形式">-->
        <!--          </el-table-column>-->
        <!--          <el-table-column-->
        <!--              width="60"-->
        <!--              prop="paperNum"-->
        <!--              label="纸质材料份数">-->
        <!--          </el-table-column>-->
        <!--          <el-table-column-->
        <!--              width="100"-->
        <!--              label="示例样表">-->
        <!--            &lt;!&ndash; eslint-disable-next-line &ndash;&gt;-->
        <!--            <template #default="scope">-->
        <!--              <div>-->
        <!--                <a class="matterail_btn sample_btn" v-if="scope.row.sampleTable" @click="previewFile(scope.row.id)">示例样表</a>-->
        <!--                <p class="tc" v-if="!scope.row.sampleTable"></p>-->
        <!--              </div>-->
        <!--            </template>-->
        <!--          </el-table-column>-->
        <!--          <el-table-column-->
        <!--              width="100"-->
        <!--              label="表格下载">-->
        <!--            &lt;!&ndash; eslint-disable-next-line &ndash;&gt;-->
        <!--            <template #default="scope">-->
        <!--              <div>-->
        <!--                <a class="matterail_btn empty_btn" v-if="scope.row.emptyTable" :href="scope.row.emptyTable">表格下载</a>-->
        <!--                <p class="tc" v-if="!scope.row.emptyTable"></p>-->
        <!--              </div>-->
        <!--            </template>-->
        <!--          </el-table-column>-->
        <!--          <el-table-column-->
        <!--              width="360"-->
        <!--              prop="deliverDemand"-->
        <!--              label="材料说明">-->
        <!--          </el-table-column>-->
        <!--        </el-table>-->
        <br />
      </div>
    </div>
  </div>
</template>

<script>
//import axios from 'axios'
import { useRoute } from "vue-router";
import axios from "axios";
import { Back } from "@element-plus/icons-vue"
import layer from 'layer-vue'
export default {
  name: 'HomeView',
  components: {
    Back
  },
  data() {
    return {
      downUrl: window.downUrl,
      downSampleUrl: window.downSampleUrl,
      downPDFUrl: window.downPDFUrl,
      title: '',
      pdfA: '050708dfd3f4464e98db63a56115c6jg_1',
      pdfB: '050708dfd3f4464e98db63a56115c6jg_2',
      designA: 'c573ae3169374b03afcf1e3a7c28d076',
      designB: '2771beb8bddc4fbf9061ddb0d98f27ec',
      design: '请准确选择本人参保地查询办理信息',
      src: '',
      pdfUrl: '',
      imageVisible: false,
      failed: false,
      errorMsg: "",
      isAbridge: true,
      abridgeData: [],
      fullscreenLoading: true,
      activeType: 0,
      detailObj: {},
      serviceOffice: '市本级',
      basicListTitle: ["", "窗口办理", "网上办理", "常规信息"],
      basicListData: [],
      officeCurrentTxt: "尊敬的参保人，目前只展示市本级医保经办机构信息，请您前往参保属地医保经办机构办理业务。我们将逐步补充完善全市医保经办机构相关信息，为您带来的不便，敬请谅解。",
      officeArr: ["市本级", "天府新区", "东部新区", "高新区", "锦江区", "青羊区", "金牛区", "武侯区", "成华区", "龙泉驿区", "青白江区", "新都区", "温江区", "双流区", "郫都区", "新津区", "简阳市", "都江堰市", "彭州市", "邛崃市", "崇州市", "金堂县", "大邑县", "蒲江县"],
      realOffice: "",
      realOfficeId: '',
      servicePdfId: '',
      basicList: [
        { matterPerson: "服务对象", matterScope: "通办范围" },
        { matterDoProcess: "办件类型", dothingType: "办理形式" },
        { legaltimelimit: "法定办结时限", promisetimelimit: "承诺办结时限" },
        { legaltimelimitexplain: "法定时限办结说明", promisetimelimitexplain: "承诺时限办结说明" },
        { ischarges: "是否收费", certificationlevel: "认证等级需求" },
        { applyobject: "行使方式", specialProcedure: "特别程序" },
        { visitsnumber: "到办事现场次数", visitsReason: "必须到现场原因" }
      ],
      windowListData: [],
      windowList: [
        { isSubscribe: "是否支持预约办理", isExpressTake: "是否支持物流快递" },
        { isExpressDoTake: "是否支持全省就近取件", isonDoSubscribe: "是否支持全省就近办理" }
      ],
      onlineListData: [],
      onlineList: [
        { onlineType: "网办类型", pcUrl: "网办地址" },
        { isOnlineExpressTake: "是否支持物流快递", isOnlineService: "是否支持上门收取申请材料" },
        { onlineProceDepth: "网上办理深度" }
      ],
      //generalListData0:[],
      generalList0: [
        { workTime: "办理时间" },
        { deptOfficeLocation: "办理地点" },
        { deptContacttel: "咨询方式" },
        { deptMonitortel: "监督投诉方式" },
      ],
      generalListData1: [],
      generalList1: [
        { performDeptname: "实施主体", version: "事项版本" },
        { matterService: "事项类型", matterEvel: "行使层级" },
        { powerSource: "权力来源", performDepttype: "实施主体性质" },
        { isGovecenter: "是否进驻政务大厅", isTerminal: "是否支持自助终端办理" },
        { isOnline: "是否网办", isPay: "是否支持网上支付" },
        { entrustedDepartment: "委托部门", jointOffice: "联办机构" },
        { matterStatus: "事项状态", numLimit: "数量限制" },
        { code: "基本编码", performCode: "实施主体编码" },
        { matterCode: "实施编码", typeCode: "业务办理项编码" },
        { streetValue: "乡镇街道名称", streetCode: "乡镇街道代码" },
        { villageValue: "村居社区名称", villageCode: "村居社区代码" }
      ],
      materialListData: [],
      mobileMaterialList: [],
      processListData: [],
      lawListData: [],
      serviceListData: [],
      qaListData: [],
      topArray: [],
      fixedLeftPanel: false,
      situationOriginData: [],
      situationData: [],
      defaultArr: [],
      defaultModel: [1, 1, 1, 1, 1, 1, 1, 1],
      selectData: [],
      optionsData: [],
      mustSelectArr: [],
      selectedMustArr: [],
      stepData: [],
      detailType: [
        { typeIndex: 0, typeName: "基本信息" },
        { typeIndex: 1, typeName: "申请材料" },
        { typeIndex: 2, typeName: "受理条件" },
        { typeIndex: 3, typeName: "办理流程" },
        { typeIndex: 4, typeName: "收费标准" },
        { typeIndex: 5, typeName: "设定依据" },
        { typeIndex: 6, typeName: "服务信息" },
        { typeIndex: 7, typeName: "常见问题" }
      ],
    }
  },
  created() {
    this.getDetails()
    this.designDo()
  },
  setup() {
    //router是全局路由对象，route= userRoute()是当前路由对象
    let route = useRoute();
    const oid = route.query.oid;
    return {
      oid,
    };
  },
  methods: {
    designDo() {
      if (this.oid == this.designA) {
        this.design = '请准确选择户籍所在地查询办理信息'
        this.officeCurrentTxt = '尊敬的参保人，目前只展示市本级医保经办机构信息，请您前往到户籍所在地医保经办机构办理业务。我们将逐步补充完善全市医保经办机构相关信息，为您带来的不便，敬请谅解。'
      } else if (this.oid == this.designB) {
        this.design = '请准确选择户籍所在地查询办理信息'
        this.officeCurrentTxt = '尊敬的参保人，目前只展示市本级医保经办机构信息，请您前往到户籍所在地医保经办机构办理业务。我们将逐步补充完善全市医保经办机构相关信息，为您带来的不便，敬请谅解。'
      }
    },
    previewAreaFile() {
      let id = ''
      if (this.oid == '4298809254367879168') {
        id = this.pdfA
      } else if (this.oid == '4315907506028437504') {
        id = this.pdfB
      }
      layer.open({
        type: 2,
        skin: 'demo-class',
        title: '清单预览',
        maxmin: false,
        shadeClose: false, // 点击遮罩关闭层
        area: ['70rem', '46rem'],
        content: samplepdfUrl + id,
        success: function (layero, index) {
          var body = layer.getChildFrame('body', index);
          body.find('img').css({ "width": "100%" });
        }
      });
    },
    previewFile(id) {
      layer.open({
        type: 2,
        skin: 'demo-class',
        title: '范表预览',
        maxmin: false,
        shadeClose: false, // 点击遮罩关闭层
        area: ['70rem', '46rem'],
        content: samplepdfUrl + id,
        success: function (layero, index) {
          var body = layer.getChildFrame('body', index);
          body.find('img').css({ "width": "100%" });
        }
      });
    },
    //初始获取所有表格数据
    getDetails() {
      axios.get("https://www.pengzhou.org.cn/api/pzbszn/findMatterValueByOid", {
        params: { oid: this.oid }
      }).then((data) => {
        if (data.data.code == 200) {
          this.fullscreenLoading = false
          this.failed = false
          if (this.oid == '4298809254367879168') {
            data.data.matter.matterPerson = '自然人（个人办理请到定点医疗机构）'
            data.data.matter.dothingType = '定点医疗机构'
          } else if (this.oid == '4315907506028437504') {
            data.data.matter.matterPerson = '自然人（个人办理请到定点医药机构）'
            data.data.matter.dothingType = '定点医药机构'
          }
          data.data.matter.dothingType = data.data.matter.serviceInit
          this.detailObj = data.data.matter
          console.log("details obj:", this.detailObj)
          var newProcess = ""
          this.detailObj.ybjProcessList.forEach((item, index) => {
            newProcess += (((index + 1) + "." + item.processName + (index == (this.detailObj.ybjProcessList.length - 1) ? "。" : "；")).toString())
          })
          this.realOffice = this.detailObj.ybjServiceList[0].deptOfficeLocation
          this.abridgeData = [
            { tt0: "服务对象", td0: this.detailObj.matterPerson },
            { tt0: "办理渠道", td0: this.detailObj.dothingType },
            { tt0: "办理时限", td0: this.detailObj.promisetimelimit },
            { tt0: "办理流程", td0: newProcess },
            { tt0: "办理地点", td0: this.detailObj.ybjServiceList[0].deptOfficeLocation },
            { tt0: "办理时间", td0: this.detailObj.ybjServiceList[0].workTime },
            { tt0: "咨询电话", td0: this.detailObj.ybjServiceList[0].deptContacttel },
            { tt0: "投诉电话", td0: this.detailObj.ybjServiceList[0].deptMonitortel },
          ]
          //基本信息
          this.sortBasicList()
          this.sortWindowList()
          this.sortOnlineList()
          //this.sortGeneralList0()
          this.sortGeneralList1()
          //材料列表
          //this.materialListData=this.detailObj.ybjMaterialList || []
          //流程列表
          this.processListData = this.detailObj.ybjProcessList || []
          var newPro = this.detailObj.flowRemark.replace(/[;；]/g, "；</br>")
          if (this.processListData[0] !== undefined) {
            this.processListData[0].flowRemark = newPro
          }
          //依据列表
          this.lawListData = this.detailObj.ybjLawList || []
          //服务列表
          this.serviceListData = this.detailObj.ybjServiceList || []
          //问题列表
          if (this.detailObj.ybjQuestionList && this.detailObj.ybjQuestionList.length > 0) {
            this.detailObj.ybjQuestionList.forEach((item, index) => {
              this.qaListData.push({
                i: index + 1,
                q: item.questionDesign,
                a: item.answer
              })
            })
          }
          this.setOfficeText('市本级');
          this.getSituation()
        } else {
          this.errorMsg = "获取事项详情失败，请稍后重试！"
          this.failed = true
          this.fullscreenLoading = false
        }
      }).catch((error) => {
        this.errorMsg = "获取事项详情失败，请稍后重试！"
        this.failed = true
        this.fullscreenLoading = false
        console.log("get data has error", error)
      })
    },
    //基本信息表格信息组织
    getBasicData(index) {
      switch (index) {
        case 0: return this.basicListData;
        case 1: return this.windowListData;
        case 2: return this.onlineListData;
        //case 3:return this.generalListData0;
        case 3: return this.generalListData1;
      }
    },
    //基本信息第一个表格信息组织
    sortBasicList() {
      this.basicList.forEach(item => {
        var rowObj = {}
        var index = 0
        for (let key in item) {
          rowObj['prop' + index] = item[key]
          rowObj['value' + index] = this.detailObj[key] || ""
          index++
        }
        this.basicListData.push(rowObj)
      })
    },
    //窗口办理表格信息组织
    sortWindowList() {
      this.windowList.forEach(item => {
        var rowObj = {}
        var index = 0
        for (let key in item) {
          rowObj['prop' + index] = item[key]
          rowObj['value' + index] = this.detailObj[key] || ""
          index++
        }
        this.windowListData.push(rowObj)
      })
    },
    //网上办理表格信息组织
    sortOnlineList() {
      this.onlineList.forEach(item => {
        var rowObj = {}
        var index = 0
        for (let key in item) {
          rowObj['prop' + index] = item[key]
          rowObj['value' + index] = this.detailObj[key] || ""
          index++
        }
        this.onlineListData.push(rowObj)
      })
    },
    //常规信息第一个表格
    // sortGeneralList0(){
    //   this.generalList0.forEach(item=>{
    //     var rowObj={}
    //     var index=0
    //     for (let key in item) {
    //       rowObj['prop'+index]=item[key]
    //       rowObj['value'+index]=this.detailObj[key] || ""
    //       index++
    //     }
    //     this.generalListData0.push(rowObj)
    //   })
    // },
    //常规信息第二个表格
    sortGeneralList1() {
      this.generalList1.forEach(item => {
        var rowObj = {}
        var index = 0
        for (let key in item) {
          rowObj['prop' + index] = item[key]
          rowObj['value' + index] = this.detailObj[key] || ""
          index++
        }
        this.generalListData1.push(rowObj)
      })
    },
    //完整版左侧列表点击
    intoTypeDetail(item, index) {
      window.scrollTo(0, this.topArray[index])
      //this.activeType=index
    },
    //左右滚动交互（不完整）
    handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.fixedLeftPanel = scrollTop > 300 ? true : false
      if (scrollTop <= this.topArray[0]) {
        this.activeType = 0
      } else if (scrollTop > this.topArray[0] && scrollTop <= this.topArray[1]) {
        this.activeType = 1
      } else if (scrollTop > this.topArray[1] && scrollTop <= this.topArray[2]) {
        this.activeType = 2
      } else if (scrollTop > this.topArray[2] && scrollTop <= this.topArray[3]) {
        this.activeType = 3
      } else if (scrollTop > this.topArray[3] && scrollTop <= this.topArray[4]) {
        this.activeType = 4
      } else if (scrollTop > this.topArray[4] && scrollTop <= this.topArray[5]) {
        this.activeType = 5
      } else if (scrollTop > this.topArray[5] && scrollTop <= this.topArray[6]) {
        this.activeType = 6
        // }else if(scrollTop>this.topArray[6] && scrollTop<=this.topArray[7]){
        //   this.activeType=7
      } else {
        this.activeType = 7
      }
      if (scrollTop === (document.body.offsetHeight - window.innerHeight)) {
        this.activeType = 7
      }
    },
    //初始获取情形树
    getSituation() {
      axios.get("https://www.pengzhou.org.cn/api/pzbszn/treeSituationData", {
        params: { matterid: this.oid }
      }).then((data) => {
        if (data.data.treeData.length === 0) {
          this.materialListData = this.detailObj.ybjMaterialList
          console.log("@@@@@@@@@@@@@", this.materialListData)
          this.materialListData.forEach(item => {
            this.mobileMaterialList.push([
              { dt: "材料名称", dd: item.materialName, dtype: 0 },
              { dt: "材料必要性", dd: item.isMust, dtype: 0 },
              { dt: "材料类型", dd: item.materialCategory, dtype: 0 },
              { dt: "材料形式", dd: item.electronicSpecification, dtype: 0 },
              { dt: "纸质材料份数", dd: item.paperNum, dtype: 0 },
              { dt: "示例样表", dd: item.sampleTable, dtype: 1, id: item.id },
              { dt: "表格下载", dd: item.emptyTable, dtype: 2, id: item.id },
              { dt: "材料说明", dd: item.materialsourceDesign, dtype: 0 },
            ])
          })
        } else {
          this.situationOriginData = data.data.treeData
          this.stepArr(data.data.treeData, -1)
          this.setDefault()
          var currentId = this.defaultArr[this.defaultArr.length - 1][0].id
          this.getNewMaterailsList(currentId)
        }
      }).catch(error => {
        console.log("situation has error", error)
      })
    },
    //将情形路整理成一维数组
    stepArr(data, parent) {
      data.forEach(item => {
        this.stepData.push({
          id: item.id,
          titleName: item.titleName,
          parent: parent
        })
        if (item.titleList && item.titleList.length > 0) {
          this.stepArr(item.titleList, item.id)
        }
      })
    },
    //设置初始情形渲染列表数据
    setDefault() {
      var first = this.situationOriginData.map(item => {
        return {
          titleName: item.titleName,
          id: item.id
        }
      })
      var second = []
      this.stepData.forEach(item => {
        if (item.parent == first[0].id) {
          second.push(item)
        }
      })
      var third = []
      this.stepData.forEach(item => {
        if (second.length > 0 && item.parent == second[0].id) {
          third.push(item)
        }
      })
      var fourth = []
      this.stepData.forEach(item => {
        if (third.length > 0 && item.parent == third[0].id) {
          fourth.push(item)
        }
      })
      var fifth = []
      this.stepData.forEach(item => {
        if (fourth.length > 0 && item.parent == fourth[0].id) {
          fifth.push(item)
        }
      })
      if (first.length > 0) this.defaultArr.push(first)
      if (second.length > 0) this.defaultArr.push(second)
      if (third.length > 0) this.defaultArr.push(third)
      if (fourth.length > 0) this.defaultArr.push(fourth)
      if (fifth.length > 0) this.defaultArr.push(fifth)
    },
    //情形选择交互
    changeSituation(id, index) {
      this.defaultArr.length = index + 1
      this.defaultModel.length = index + 1
      for (var i = 0; i < 5; i++) {
        this.defaultModel.push(1)
      }
      var newItem0 = []
      this.stepData.forEach(item => {
        if (item.parent == id) {
          newItem0.push(item)
        }
      })
      if (newItem0.length > 0) {
        this.defaultArr.push(newItem0)
      }

      var newItem1 = []
      this.stepData.forEach(item => {
        if (newItem0.length > 0 && item.parent == newItem0[0].id) newItem1.push(item)
      })
      if (newItem1.length > 0) {
        this.defaultArr.push(newItem1)
      }

      var newItem2 = []
      this.stepData.forEach(item => {
        if (newItem1.length > 0 && item.parent == newItem1[0].id) newItem2.push(item)
      })
      if (newItem2.length > 0) {
        this.defaultArr.push(newItem2)
      }

      var newItem3 = []
      this.stepData.forEach(item => {
        if (newItem2.length > 0 && item.parent == newItem2[0].id) newItem3.push(item)
      })
      if (newItem3.length > 0) {
        this.defaultArr.push(newItem3)
      }

      var newItem4 = []
      this.stepData.forEach(item => {
        if (newItem3.length > 0 && item.parent == newItem3[0].id) newItem4.push(item)
      })
      if (newItem4.length > 0) {
        this.defaultArr.push(newItem4)
      }
      var currentId = this.defaultArr[this.defaultArr.length - 1][0].id
      this.getNewMaterailsList(this.defaultArr.length == (index + 1) ? id : currentId)
    },
    //情形变化时获取材料列表
    getNewMaterailsList(id) {
      axios.get("https://www.pengzhou.org.cn/api/pzbszn/getSituationYbjMaterial", {
        params: { situationid: id }
      }).then((data) => {
        this.materialListData = data.data.material || []
        this.mobileMaterialList.length = 0
        this.materialListData.forEach(item => {
          this.mobileMaterialList.push([
            { dt: "材料名称", dd: item.materialName, dtype: 0 },
            { dt: "材料必要性", dd: item.isMust, dtype: 0 },
            { dt: "材料类型", dd: item.materialCategory, dtype: 0 },
            { dt: "材料形式", dd: item.electronicSpecification, dtype: 0 },
            { dt: "纸质材料份数", dd: item.paperNum, dtype: 0 },
            { dt: "示例样表", dd: item.sampleTable, dtype: 1, id: item.id },
            { dt: "表格下载", dd: item.emptyTable, dtype: 2, id: item.id },
            { dt: "材料说明", dd: item.materialsourceDesign, dtype: 0 },
            { dt: "id", dd: item.id, dtype: 0 },
          ])
        })
      }).catch(error => {
        console.log("situation has error", error)
      })
    },
    servicePdf(id) {
    },
    //办理地址设置
    setOfficeText(t, d) {
      let flag = true
      for (let key = 0; key < this.serviceListData.length; key++) {
        if (this.serviceListData[key].area == t) {
          this.realOffice = this.serviceListData[key].deptOfficeLocation
          this.abridgeData[5].td0 = this.serviceListData[key].workTime
          this.abridgeData[6].td0 = this.serviceListData[key].deptContacttel
          this.abridgeData[7].td0 = this.serviceListData[key].deptMonitortel
          if (this.serviceListData[key].pdfimg !== '' && this.serviceListData[key].pdfimg !== undefined) {
            this.realOfficeId = this.serviceListData[key].pdfimg
            this.servicePdfId = this.serviceListData[key].id
            this.realOffice = '点击下载预览该区域办理地址'
          }
          flag = false
          break
        }
      }
      if (flag) {
        this.realOfficeId = ''
        this.servicePdfId = ''
        this.realOffice = '暂无相关数据'
        this.abridgeData[5].td0 = '暂无相关数据'
        this.abridgeData[6].td0 = '暂无相关数据'
        this.abridgeData[7].td0 = '暂无相关数据'
      }
    },
    //进入完整版
    intoBigVer() {
      this.isAbridge = false
      //滚动数据保存与监听
      if (this.topArray.length === 0) {
        this.$nextTick(() => {
          this.topArray = []
          this.detailType.forEach((item, index) => {
            let curTop = this.$refs['scrollDom' + index].offsetTop
            let winHei = window.innerHeight
            let top = curTop > winHei ? (curTop - winHei / 1) : curTop
            this.topArray.push(top)
          })
          window.addEventListener('scroll', this.handleScroll)
        })
      }
    },
    //受理条件设置
    setConditions(c) {
      if (c == undefined) {
        return "无明确要求"
      } else {
        var newC = c.replace(/[;；]/g, "；</br>")
        return newC
      }
    },
    propStyle(obj) {
      if (obj.columnIndex == 0 || obj.columnIndex == 2) {
        return { background: "#f8f8f8" }
      } else {
        return { background: "#ffffff" }
      }
    },
    headStyle() {
      return { background: "#f8f8f8" }
    },
    arraySpanMethod(obj) {
      if (obj.columnIndex) {
        if (obj.rowIndex === 0 || obj.rowIndex === 2 || obj.rowIndex === 3 || obj.rowIndex === 4) {
          return [1, 3]
        }
      }
    },
    processSpan(obj) {
      if (obj.columnIndex === 6) {
        if (obj.rowIndex === 0) {
          return [this.processListData.length, 1]
        }
      }
    },
    setPDFheight() {
      return { 'height': window.innerHeight * 0.8 + 'px', 'overflow': 'hidden', 'textAlign': 'center' }
    }
  }
}
</script>

<style scoped>
.content_wrap {
  width: 100%;
  clear: both;
  overflow: hidden;
}

.left_wrap {
  width: 230px;
  float: left;
}

.left_wrap_fixed {
  width: 230px;
  float: left;
  position: fixed;
  top: 10px;
  margin-right: 10px;
}

.right_wrap {
  width: 960px;
  float: right;
}

.type_area {
  box-shadow: 0 0 0 0 #f0f0f0;
  border: 0px solid #f0f0f0;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 8px 0;
  background: #fbfbfb;
  text-align: left;
}

.type_item {
  font-size: 16px;
  line-height: 48px;
  color: #333;
  cursor: pointer;
  transition: all 0.5s;
}

.type_item:hover {
  color: #5482eb;
  padding-left: 10px;
}

.active_item {
  color: #5482eb;
  padding-left: 10px;
  border-bottom: solid 2px #5482eb;
  background: url("../assets/2022_dian.png") center left no-repeat;
}

.list_big_tile {
  height: 49px;
  font-size: 18px;
  box-sizing: border-box;
  text-align: left;
  color: #5482eb;
  border-bottom: 3px solid #e3e3e3;
  position: relative;
}

.list_big_tile span {
  display: inline-block;
  padding: 10px 0;
  border-bottom: 3px solid #5482eb;
}

.list_wrap {
  margin: 8px 0;
}

.list_small_title {
  font-size: 18px;
  color: #5482eb;
  padding: 18px 14px 10px;
  font-weight: normal;
}

.table_txt {
  color: #606266;
}

.q_txt {
  color: #5482eb;
  font-size: 16px;
  padding: 5px 0;
}

.matterail_btn {
  display: block;
  width: 74px;
  height: 28px;
  border-radius: 4px;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  margin: 4px;
  cursor: pointer;
}

.empty_btn {
  background: #ecf0f9;
  color: #5482eb;
}

.sample_btn {
  background: #fef4ee;
  color: #f5a177;
}

.matter_title {
  text-align: left;
  font-weight: bold;
  color: #5482eb;
  padding: 10px 15px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: flex-start;
}

.matter_title h4 {
  font-size: 14px;
}

.ver_switch {
  position: absolute;
  right: 20px;
  top: 20px;
}

a {
  color: #5482eb;
}

.into_select {
  font-size: 12px;
  color: #909399;
  text-align: left;
  padding-top: 10px;
}

.notice_txt {
  font-size: 12px;
  color: #5482eb;
}

.into_select a {
  display: inline-block;
  padding: 6px 10px 5px;
  color: #fff;
  background: #5482eb;
  border-radius: 4px;
  margin-left: 10px;
  transition: all 0.5s;
  cursor: pointer;
}

.into_select a:hover {
  background: #f39803;
}

.widle_title {
  margin-top: 8px;
}

.simple_list {
  width: 90%;
  margin: 0 auto;
}

.select_wrap {
  width: 100%;
  padding: 15px;
  background: #f8f8f8;
  border: solid #ccc 1px;
  border-radius: 10px;
  margin: 15px 0 0;
  text-align: left;
  box-sizing: border-box;
}

.select_txt {
  font-size: 14px;
  line-height: 28px;
  padding: 5px 0;
}

.select_item .btn_wrap {
  margin: 0 15px;
}

.back_btn {
  margin-right: 15px;
}

.back_btn span,
.back_btn svg {
  width: 14px;
  height: 14px;
}

.pdf_self canvas {
  height: 100% !important;
  width: auto !important;
}

.office_notice {
  font-size: 12px;
  color: #8b8b8b;
  margin-bottom: 10px;
}

.real_office {
  margin-top: 5px;
}

.el-radio-group-yb .is-checked span {
  color: #5482eb !important;
}

.el-select__popper {
  outline: none;
  background: red;
}

.evey_materail_wrap h6 {
  font-size: 15px;
  color: #ffaf16;
  font-weight: bold;
  text-align: left;
  padding: 10px 0;
}
</style>